<template>
	<view class="smart-container">
		<view class="smart-panel-title">1. 容器</view>
		<view class="smart-panel-h"@click="goDetaiPage('view')"><text>view视图</text></view>
		<view class="smart-panel-h"@click="goDetaiPage('scroll-view')"><text>scroll-view滑动视图</text></view>
		<view class="smart-panel-h"@click="goDetaiPage('swiper')"><text>swiper可滑动视图</text></view>
		
		<view class="smart-panel-title">2.基础内容</view>
		<view class="smart-panel-h"@click="goDetaiPage('text')"><text>text文本剪辑</text></view>
		<view class="smart-panel-h"@click="goDetaiPage('rich-text')"><text>rich-text富文本编辑</text></view>
		<view class="smart-panel-h"@click="goDetaiPage('progress')"><text>progress进度条</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goDetaiPage(e){
				if(typeof e ==='string'){
					uni.navigateTo({
						url:'/pages/components/'+e+'/'+e
					});
				}else{
					uni.navigateTo({
						url:e.url
					});
				}
			}
		}
	}
</script>

<style>
.smart-container{
	padding: 15rpx;
	background-color: #f8f8f8;
}
.smart-panel{
	margin-bottom: 12px;
}
.smart-panel-title{
	background-color: #f1f1f1;
	font-size: 14px;
	font-weight: normal;
	padding: 12px;
	flex-direction: row;
}
.smart-panel-h{
	background-color: #ffffff;
	flex-direction: row;
	align-items: center;
	padding: 12px;
	margin-bottom: 2px;
}
</style>
